<template>
  <div class="subPopup">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @input="onInput"
      @cancel="onCancel"
      @search="onSearch"
    />
    <down-list :list="searchList" v-if="$store.state.blockShow == 1"></down-list>
    <history-hot @changeInput="changeValue" :history="history" :hot="hotlist" v-else-if="$store.state.blockShow == 2"></history-hot>
    <goods :value="value" :goodsList="goodslist" :filterCategory="filterCategory" v-else></goods>
  </div>
</template>

<script>
import HistoryHot from "@/components/SubPopup/HistoryHot";
import Goods from "@/components/SubPopup/Goods";
import DownList from "@/components/SubPopup/DownList";
import { getSearchData, downList, goodsList } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      history: [],
      hotlist: [],
      searchList: [],
      goodslist: [],
      filterCategory: []
    };
  },
  components: {
    DownList,
    Goods,
    HistoryHot
  },
  watch: {
    value(e) {
      if (e == "") {
        this.$store.commit("changeBlockShow", 2);
      }
    }
  },
  created() {
    getSearchData().then(res => {
      this.value = res.data.defaultKeyword.keyword;
      this.history = res.data.historyKeywordList;
      this.hotlist = res.data.hotKeywordList;
    });
  },
  /*
    唯一会出现Product区块的情况：执行搜索的时候
    历史区块的出现情况：
    1、刚进popup时，要显示HistoryHot
    2、只要搜索框中没有文字，就显示HistoryHot
    出现下拉列表区块的情况：只要当前正在输入中，就应该出现DownList
  */
  methods: {
    // 子传父，接收值
    changeValue(e){
      this.value = e
    },
    onCancel() {
      this.$store.commit("changeBlockShow", 2);
      this.$store.commit("changePopShow", false);
    },
    onSearch() {
      // 使用vuex
      this.$store.commit("changeBlockShow", 3);
      this.$store.dispatch("AsyncChangePopGoodList", {keyword:this.value});
    },
    onInput() {
      this.$store.commit("changeBlockShow", 1);
      let params = {
        keyword: this.value
      };
      setTimeout(() => {
        downList(params).then(res => {
          this.searchList = res.data;
        });
      }, 500);
    }
  }
};
</script>

<style>
</style>